<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-loading-modal"
		:class="_classes"
		:style="_styles"
	>
		<view
			class="pure-loading-modal__mask"
			v-if="mask"
		></view>
		<view class="pure-loading-modal__body">
			<view class="pure-loading-modal__content">
				<view class="pure-loading-modal__loading">
					<pure-icon :name="loadingIconName"></pure-icon>
				</view>
				<view
					class="pure-loading-modal__text"
					v-if="text"
					>{{ text }}</view
				>
			</view>
			<view
				class="pure-loading-modal__close"
				v-if="closeable"
				@tap="$emit('onClose')"
			>
				<pure-icon :name="closeIconName"></pure-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, watch, nextTick } from "vue";
	import props from "./props";
	import { delay } from "@/uni_modules/pure-utils";

	// 显示状态
	const _status = ref("");

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClose"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 显示状态
		array.push(`pure-loading-modal--${_status.value}`);

		// 垂直布局
		if (_props.vertical) array.push("pure-loading-modal--vertical");

		// 显示遮罩
		if (_props.mask) array.push("pure-loading-modal--mask");

		return array;
	});

	// **************************************************************************************************************
	// * Styles
	// **************************************************************************************************************
	const _styles = computed(() => {
		const array = [];
		return array;
	});

	// 监听显示状态设置过渡类
	watch(
		() => _props.show,
		async (newVal, oldVal) => {
			if (oldVal === undefined) return;
			if (newVal) {
				_status.value = "before-show";
				await nextTick();
				await delay(0);
				_status.value = "to-show";
				await nextTick();
				await delay(0);
				_status.value = "after-show";
			} else {
				_status.value = "before-leave";
				await nextTick();
				await delay(0);
				_status.value = "to-leave";
				await nextTick();
				await delay(250);
				_status.value = "after-leave";
			}
		},
		{
			immediate: true
		}
	);
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
